<template>
  <div id="menus">
    <el-row class="table-grid-content">
      <el-col :span="4">
        <el-input v-model="input" placeholder="菜单名称"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 14px;">
        <el-input v-model="input2" placeholder="父级菜单"></el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="primary" icon="el-icon-plus" @click="addMenu()">增加菜单</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="danger" icon="el-icon-delete" @click="batchDelMenus()">删除</el-button>
      </el-col>
      <el-col :span="2" style="margin-left: 14px;">
        <el-button @click="toggleSelection()" icon="el-icon-link">取消</el-button>
      </el-col>
    </el-row>
    <!-- 表格-->
    <el-table ref="multipleTable" :data="table2" tooltip-effect="dark" style="width: 100%"
      :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" size="mini">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="mid" label="编号" width="270">

      </el-table-column>
      <el-table-column prop="mname" label="菜单名称" width="220">
      </el-table-column>
      <!-- <el-table-column prop="name" label="地址" width="120"></el-table-column> -->
      <el-table-column prop="path" label="路径" width="220"></el-table-column>
      <el-table-column prop="parentName" label="父级菜单" width="210"></el-table-column>

      <el-table-column label="操作"  width="260">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)" round>修改</el-button>

          <el-button size="mini" type="danger" @click="handleDelete(scope.row.mid)" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页-->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[7,8,9]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 增加-->
    <el-dialog title="增加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.mname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="父级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.p_mid" placeholder="请选择活动区域">
            <el-option v-for="i  in oneMenus" :label="i.mname" :value="i.mid"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cliAddMenu()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修啊该i-->
    <el-dialog title="修改角色" :visible.sync="dialogUpdaVisible">
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          {{form.mid}}
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.mname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.p_mid" placeholder="请选择活动区域">
            <el-option v-for="i  in oneMenus" :label="i.mname" :value="i.mid"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdaVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMenu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'menus',
    data() {
      return {
        input: '',
        input2: '',
        dialogFormVisible: false,
        dialogUpdaVisible: false,
        formLabelWidth: '90px',
        pageNum: 1,
        pageSize: 9,
        total: 0,
        tableData: [],
        oneMenus: [],
        multipleSelection: [],
        form: {
          mid: '',
          mname: '',
          path: '',
          photo: '',
          p_mid: ''
        }
      }
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = [];
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].mid)
        }
        console.log(this.multipleSelection);
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 == 0) {
          return 'success-row';
        } else {
          return 'warning-row';
        }
        return '';
      },
      handleSizeChange(val) {

        this.pageSize = val;
        this.searchMenu(this.pageNum, this.pageSize);

      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.searchMenu(this.pageNum, this.pageSize);
      },
      addMenu() {
        this.$http.post("system/menu/oneMenus").then(res => {
          this.oneMenus = res.data;
        }).catch(err => {
          console.log(err);
        })
        this.dialogFormVisible = true;
      },
      /* 修改*/
      handleEdit(data) {
        this.$http.post("system/menu/oneMenus").then(res => {
          this.oneMenus = res.data;
        }).catch(err => {
          console.log(err);
        })
        this.form.mid = data.mid;
        this.form.mname = data.mname;
        this.form.path = data.path;
        this.form.p_mid = data.p_mid;

        this.dialogUpdaVisible = true;
      },
      searchMenu(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post("system/menu/getMenus", data).then(res => {
          if (res.data) {
            this.pageNum = res.data.pageNum;
            this.pageSize = res.data.pageSize;
            this.tableData = res.data.rows;
            this.total = res.data.total;
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].parentName === undefined || this.tableData[i].parentName == null) {
                this.tableData[i].parentName = "无";
              }
              if (this.tableData[i].path === undefined || this.tableData[i].path == null) {
                this.tableData[i].path = "无";
              }
            }
          }
        }).catch(err => {
          console.log(err);
        })
      },
      cliAddMenu() {
        this.dialogFormVisible = false;
        var data = this.form;
        this.$http.post("system/menu/addMenu", this.$qs.stringify(data)).then(res => {
          if (res.state = 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.form.mid = '';
            this.form.mname = '';
            this.form.path = '';
            this.form.photo ='';
            this.form.p_mid = '';
            this.searchMenu(this.pageNum, this.pageSize);
          }
        }).catch(err => {
          console.log(err);
        })
      },
      //删除
      handleDelete(mid) {
        if (confirm("确定删除编号: " + mid + " 的信息?")) {
          this.$http.post("system/menu/delMenus?mid=" + mid).then(res => {
            if (res.state = 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.searchMenu(this.pageNum, this.pageSize);
            }
          }).catch(err => {
            console.log(err);
          });
        }
      },
      batchDelMenus(){
       var mids = this.multipleSelection;
        if(mids.length>0){
          if(confirm('确定删除?')){
            var data =new URLSearchParams();
            data.append("mids",mids);
            this.$http.post('system/menu/batchDelMenus',data).then(res=>{
              if (res.state = 200) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.searchMenu(this.pageNum, this.pageSize);
              }
            }).catch(err=>{
              console.log(err);
            })
          }
        }else{
          alert('请选择要删除的信息');
        }
      },
      updateMenu(){
        var data =this.form;
       this.$http.post('system/menu/updateMenu',this.$qs.stringify(data)).then(res=>{
         if (res.state = 200) {
           this.$message({
             message: '更新成功',
             type: 'success'
           });
           this.form.mid = '';
           this.form.mname = '';
           this.form.path = '';
           this.form.p_mid = '';
           this.form.photo ='';
           this.searchMenu(this.pageNum, this.pageSize);
           this.dialogUpdaVisible=false;
         }
       }).catch(err=>{
         console.log(err);
       })
      }
    },
    computed: {
      table() {
        var name = this.input;
        return this.tableData.filter(res => {
          return res.mname.indexOf(name) != -1;
        })
      },
      table2() {
        var name = this.input2;
        return this.table.filter(res => {
          return res.parentName.indexOf(name) != -1;
        })
      }
    },
    mounted() {
      this.searchMenu(this.pageNum, this.pageSize);
    }
  }
</script>

<style>
  .el-input {
    width: 85%;
  }

  .block {
    margin-top: 8px;
  }

  .el-pagination {
    text-align: center;
  }

  .el-table .warning-row {
    background: white;
  }

  .el-table .success-row {
    background: whitesmoke;
  }

  #menus {
    line-height: 0px;

    margin-top: 2sspx;
    padding: 13px;
  }

  .el-table {

    margin-top: 10px;
  }
</style>
